<template>
  <div>{{ money }}</div>
  <button @click="money++">加一块钱</button>
  <button @click="catchMoney">抢钱</button>

  <div>{{ obj }}</div>
  <button @click="changeName">换名</button>
</template>

<script>
import { ref } from 'vue'
export default {
  // vue3 中实现的响应式???  proxy 只能代理对象 => 必须是对象 才能响应式
  // 作用: 对传入的数据(一般简单数据类型), 包裹一层对象, 转换成响应式

  // 1. ref 函数接收一个的值, 返回一个ref 响应式对象, 有唯一的属性 value
  // 2. 在 setup 函数中, 通过 ref 对象的 value 属性, 可以访问到值
  // 3. 在模板中, ref 属性会自动解套, 不需要额外的 .value => 提前处理一下

  // 4. ref函数也支持传入复杂类型，传入复杂类型，也会做响应式处理

  setup() {
    // {value: 1000} => 响应式
    const money = ref(10000)

    // 模板中不需要.value 但是在setup 中必须使用.value
    const catchMoney = () => {
      money.value += 10000
    }

    const obj = ref({
      name: 'zs',
      age: 100,
    })
    const changeName = () => {
      obj.value.name = 'ls'
    }
    // 两种选择方案:
    // 复杂数据 => reactive; 简单数据 => ref
    // 复杂/简单数据 => ref(推荐=>性能高一些)

    return {
      money,
      catchMoney,
      obj,
      changeName,
    }
  },
}
</script>
